<template>
  <div class="right-menu">
    <router-link :to="v.path" v-for="(v,i) in menuItems" :key="i"  class="menu-item">{{v.name}}</router-link>
    <!-- <router-link to="/gre" class="menu-item">GRE</router-link>
    <router-link to="/ea" class="menu-item">EA</router-link>
    <router-link to="/ea" class="menu-item">留学</router-link>
    <router-link to="/ea" class="menu-item">论坛</router-link> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const currentActive = ref(0)

const menuItems = ref([
  { path: '/gmat', name: 'GMAT' },
  { path: '/gre', name: 'GRE' },
  { path: '/ea', name: 'EA' },
  { path: '/study-abroad', name: '留学' },
  { path: '/forum', name: '论坛' }
])
</script>

<style scoped>
.right-menu {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  /* padding: 20px; */
  /* background-color: #f5f5f5; */
  /* border: 1px solid #ddd; */
  border-radius: 4px;
}

.menu-item {
  /* margin-bottom: 10px; */
  text-decoration: none;
  color: #F0F6F7;
  font-size: 14px;
  margin-right: 50px;
  &:hover {
    color:#ffffff;
    font-weight: 600;
  }
}
.router-link-active{
    color:pink
}
</style>
